import React, { Component, Fragment } from 'react';
import '../../css/yxmain.scss'
import '../../css/yxfoot.scss'

class Shopcart extends Component {
    add = (index) => {
        let products = this.state.products
        ++products[index].num
        this.setState({
            products: products
        })

    }
    sub = (index) => {
        let products = this.state.products
        if(products[index].num!==0){
            --products[index].num
            this.setState({
                products: products
            })
        }
       
    }
    getTotal = () => {
        let total = 0
        // 总价=产品数量*价格
        this.state.products.map(v => {
            return total += v.num * v.price
        })
        return total
    }
    getTotalnum=()=>{
        let total=0
        // 总数量等于选中产品数量之和
        this.state.products.map(v=>{
            if(v.checked){
                total+=v.num
            }
            return total
        })
        return total
    }
    state = {
        total: 1,
        products: [
            {
                id: 1,
                product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
                img_url:
                    "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
                price: "588",
                origin_price: 599,
                num: 1,
                checked: true,
            },
            {
                id: 2,
                product_title: "黑科技分区控温，95%鹅绒抗菌儿童鹅绒被",
                img_url:
                    "https://yanxuan-item.nosdn.127.net/50da19cc467b002f15a8eb7a5663408e.png?type=webp&imageView&thumbnail=160x0&quality=75",
                price: "588",
                origin_price: 599,
                num: 1,
                checked: true,
            }
        ]

    }
    render() {
        return (
            <Fragment>
                <div className="cart-main">
                    {this.state.products.map((v, index) => {
                        return (<div className="mian-item" key={v.id}>
                            <div className="item-left">
                                <i className="iconfont icon-xuanzhong-2"></i>
                            </div>
                            <div className="item-mid">
                                <img src={v.img_url} alt="" />
                            </div>
                            <div className="item-right">
                                <div className="right-top">{v.product_title}</div>
                                <div className="right-und">
                                    <div className="und-left">
                                        <span className="price">
                                            ￥{v.price}
                                        </span>
                                        <span className="origin-price">
                                            ￥{v.origin_price}
                                        </span>
                                    </div>
                                    <div className="und-right">
                                        <i className="iconfont icon-sub" onClick={() => { this.sub(index) }}></i>
                                        <span className="num">
                                            {v.num}
                                        </span>
                                        <i className="iconfont icon-CombinedShape" onClick={() => { this.add(index) }}></i>
                                    </div>
                                </div>
                            </div>
                        </div>)
                    })}

                </div>
                <div className="cart-foot">
                    <div className="foot-left">
                        <i className="iconfont icon-xuanzhong-"></i>
                        <span>已选中{this.getTotalnum()}</span>
                    </div>
                    <div className="foot-right">
                        <div className="right-left">
                            <div className="left-top">
                                总价：￥{this.getTotal()}
                            </div>
                            <div className="left-und">
                                优惠价：￥22
                        </div>
                        </div>
                        <div className="right-right">
                            下单
                    </div>
                    </div>
                </div>
            </Fragment>
        );
    }
}

export default Shopcart;
